package com.example.chinesechess.presentation.ui.screen

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import com.example.chinesechess.R

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SettingsScreen(navController: NavController) {
    // Settings states
    val soundEnabled = remember { mutableStateOf(true) }
    val vibrationEnabled = remember { mutableStateOf(true) }
    val notationEnabled = remember { mutableStateOf(false) }
    val highlightEnabled = remember { mutableStateOf(true) }
    
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(stringResource(R.string.menu_settings)) },
                navigationIcon = {
                    IconButton(onClick = { navController.popBackStack() }) {
                        // Replace with actual back icon
                        Text("<")
                    }
                }
            )
        }
    ) { padding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
                .padding(16.dp)
        ) {
            // Sound toggle
            SettingToggle(
                title = stringResource(R.string.settings_sound),
                state = soundEnabled.value,
                onToggle = { soundEnabled.value = it }
            )
            
            Divider(modifier = Modifier.padding(vertical = 8.dp))
            
            // Vibration toggle
            SettingToggle(
                title = stringResource(R.string.settings_vibration),
                state = vibrationEnabled.value,
                onToggle = { vibrationEnabled.value = it }
            )
            
            Divider(modifier = Modifier.padding(vertical = 8.dp))
            
            // Notation toggle (show coordinates)
            SettingToggle(
                title = stringResource(R.string.settings_notation),
                state = notationEnabled.value,
                onToggle = { notationEnabled.value = it }
            )
            
            Divider(modifier = Modifier.padding(vertical = 8.dp))
            
            // Highlight moves toggle
            SettingToggle(
                title = stringResource(R.string.settings_highlight),
                state = highlightEnabled.value,
                onToggle = { highlightEnabled.value = it }
            )
            
            Divider(modifier = Modifier.padding(vertical = 8.dp))
            
            // Theme selection (placeholder)
            Text(
                text = stringResource(R.string.settings_theme),
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier.padding(vertical = 8.dp)
            )
            
            // Simple theme options
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = 16.dp),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                ThemeOption(
                    color = MaterialTheme.colorScheme.primary,
                    selected = true,
                    onClick = { /* Change theme */ },
                    modifier = Modifier.weight(1f)
                )
                
                ThemeOption(
                    color = MaterialTheme.colorScheme.tertiary,
                    selected = false,
                    onClick = { /* Change theme */ },
                    modifier = Modifier.weight(1f)
                )
                
                ThemeOption(
                    color = MaterialTheme.colorScheme.secondary,
                    selected = false,
                    onClick = { /* Change theme */ },
                    modifier = Modifier.weight(1f)
                )
            }
            
            // About section
            Text(
                text = "关于",
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier.padding(top = 16.dp, bottom = 8.dp)
            )
            
            Text(
                text = "中国象棋 v1.0.0",
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(bottom = 4.dp)
            )
            
            Text(
                text = "© 2023 象棋开发团队",
                style = MaterialTheme.typography.bodySmall
            )
        }
    }
}

@Composable
fun SettingToggle(
    title: String,
    state: Boolean,
    onToggle: (Boolean) -> Unit
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 8.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text(
            text = title,
            style = MaterialTheme.typography.titleMedium
        )
        
        Switch(
            checked = state,
            onCheckedChange = onToggle
        )
    }
}

@Composable
fun ThemeOption(
    color: androidx.compose.ui.graphics.Color,
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Surface(
        modifier = modifier
            .height(40.dp),
        color = color,
        shape = MaterialTheme.shapes.small,
        onClick = onClick
    ) {
        if (selected) {
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = androidx.compose.ui.Alignment.Center
            ) {
                // Checkmark or indicator for selected theme
                Text(
                    text = "✓",
                    color = androidx.compose.ui.graphics.Color.White
                )
            }
        }
    }
} 